<template>
  <!-- 设置 -->
  <div>
    <el-row>
      <el-col :span="24">
        <div id="bg-purple-dark">
          <span
            style="position: relative; top: 20px; left: 20px; font-size: 18px"
            >{{ schemeName }}</span
          >
          <span
            style="
              position: relative;
              top: 20px;
              left: 35px;
              font-size: 14px;
              color: #909399;
            "
            >计薪周期：{{ salaryCycle }}</span
          >
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            style="margin-top: 30px; margin-left: 20px"
          >
            <el-menu-item index="1" @click="changeHeight(1)"
              >确认人员</el-menu-item
            >
            <el-menu-item index="2" @click="changeHeight(2)"
              >专项扣除</el-menu-item
            >
            <el-menu-item index="3" @click="changeHeight(3)"
              >社保公积金</el-menu-item
            >
            <el-menu-item index="4" @click="changeHeight(4)"
              >薪资核算</el-menu-item
            >
          </el-menu>
          <div v-if="activeIndex == 1">
            <!-- <div class="count-tiao"></div>
                        <div class="count-tiao"></div>
                        <div class="count-tiao"></div>
                        <div class="count-tiao"></div>
                        <div class="count-tiao"></div>
                        <div class="count-tiao"></div> -->
            <el-row :gutter="0">
              <el-col :span="4">
                <div
                  :class="1 == number ? 'bg-purple-active' : 'bg-purple'"
                  @click="tab(1)"
                >
                  <br />
                  <span style="font-size: 30px; margin-left: 30px"
                    >{{ salaryCount.salariedPeople }}人</span
                  >
                  <br />
                  <span
                    style="font-size: 15px; margin-left: 30px; color: #909399"
                    >计薪人数</span
                  >
                </div>
              </el-col>
              <el-col :span="4">
                <div
                  :class="2 == number ? 'bg-purple-active' : 'bg-purple'"
                  @click="tab(2)"
                >
                  <br />
                  <span style="font-size: 30px; margin-left: 30px"
                    >{{ salaryCount.newHires }}人</span
                  >
                  <br />
                  <span
                    style="font-size: 14px; margin-left: 30px; color: #909399"
                    >本月新入职</span
                  >
                </div>
              </el-col>
              <el-col :span="4">
                <div
                  :class="3 == number ? 'bg-purple-active' : 'bg-purple'"
                  @click="tab(3)"
                >
                  <br />
                  <span style="font-size: 30px; margin-left: 30px">0人</span>
                  <br />
                  <span
                    style="font-size: 14px; margin-left: 30px; color: #909399"
                    >本月离职</span
                  >
                </div>
              </el-col>
              <el-col :span="4">
                <div
                  :class="4 == number ? 'bg-purple-active' : 'bg-purple'"
                  @click="tab(4)"
                >
                  <br />
                  <span style="font-size: 30px; margin-left: 30px">0人</span>
                  <br />
                  <span
                    style="font-size: 14px; margin-left: 30px; color: #909399"
                    >本月调薪</span
                  >
                </div>
              </el-col>
              <el-col :span="4">
                <div
                  :class="5 == number ? 'bg-purple-active' : 'bg-purple'"
                  @click="tab(5)"
                >
                  <br />
                  <span style="font-size: 30px; margin-left: 30px"
                    >{{ salaryCount.formal }}人</span
                  >
                  <br />
                  <span
                    style="font-size: 14px; margin-left: 30px; color: #909399"
                    >正式员工</span
                  >
                </div>
              </el-col>
              <el-col :span="4">
                <div
                  :class="6 == number ? 'bg-purple-active' : 'bg-purple'"
                  @click="tab(6)"
                >
                  <br />
                  <span style="font-size: 30px; margin-left: 30px"
                    >{{ salaryCount.probationPeriod }}人</span
                  >
                  <br />
                  <span
                    style="font-size: 14px; margin-left: 30px; color: #909399"
                    >试用期</span
                  >
                </div>
              </el-col>
            </el-row>

            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              style="margin-left: 30px; padding-top: 20px"
            >
              <el-button type="primary">添加人员</el-button>
              <el-button>批量删除</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="关键词">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入关键词"
                ></el-input>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="部门">
                <el-select v-model="formInline.value" placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.deptName"
                    :label="item.deptName"
                    :value="item.deptName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="员工状态">
                <el-select v-model="formInline.region" placeholder="员工状态">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="试用期" value="1"></el-option>
                  <el-option label="正式员工" value="2"></el-option>
                  <el-option label="已离职" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="activeIndex == 2">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              style="margin-left: 30px; padding-top: 20px"
            >
              &nbsp;
              <el-form-item label="关键词">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入关键词"
                ></el-input>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="部门">
                <el-select v-model="formInline.value" placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.deptName"
                    :label="item.deptName"
                    :value="item.deptName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="员工状态">
                <el-select v-model="formInline.region" placeholder="员工状态">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="试用期" value="1"></el-option>
                  <el-option label="正式员工" value="2"></el-option>
                  <el-option label="已离职" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-button style="margin-left: 160px">导入</el-button>
              <el-button>导出</el-button>
            </el-form>
          </div>
          <div v-if="activeIndex == 3">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              style="margin-left: 30px; padding-top: 20px"
            >
              &nbsp;
              <el-form-item label="关键词">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入关键词"
                ></el-input>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="部门">
                <el-select v-model="formInline.value" placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.deptName"
                    :label="item.deptName"
                    :value="item.deptName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="员工状态">
                <el-select v-model="formInline.region" placeholder="员工状态">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="试用期" value="1"></el-option>
                  <el-option label="正式员工" value="2"></el-option>
                  <el-option label="已离职" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-button style="margin-left: 160px">导入</el-button>
              <el-button>导出</el-button>
            </el-form>
          </div>
          <div v-if="activeIndex == 4">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              style="margin-left: 30px; padding-top: 20px"
            >
              <el-button type="primary">核酸</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="关键词">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入关键词"
                ></el-input>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="部门">
                <el-select v-model="formInline.value" placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.deptName"
                    :label="item.deptName"
                    :value="item.deptName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-form-item label="员工状态">
                <el-select v-model="formInline.region" placeholder="员工状态">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="试用期" value="1"></el-option>
                  <el-option label="正式员工" value="2"></el-option>
                  <el-option label="已离职" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-button style="margin-left: 80px">导入</el-button>
              <el-button>导出</el-button>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div
          class="grid-content bg-purple-dark-two"
          style="padding-left: 25px; padding-top: 20px"
        >
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#f4f4f4' }"
            border
            style="width: 98%"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="姓名"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="部门"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="职位"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="手机号"
              width="150"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="工号"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="证件号码"
              width="180"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="员工状态"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="入职日期"
              width="130"
            ></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="padding-left: 825px; padding-top: 20px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      formInline: {},
      activeIndex: "1",
      number: "0",
      options1: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      schemeName: this.$route.query.schemeName,
      salaryCycle: this.$route.query.salaryCycle,
      salaryCount: {
        salariedPeople: "",
        newHires: "",
        probationPeriod: "",
        formal: "",
      },
      dialogTableVisible:false
    };
  },
  created() {
    this.getHolidayType(); //部门
    this.findSalaryByIdList(); //查询
    this.getSalaryCount();
  },
  methods: {
    changeHeight(index) {
      if (index == 1) {
        this.activeIndex = 1;
        var div = document.getElementById("bg-purple-dark");
        div.style.height = "310px";
      }
      if (index == 2) {
        this.activeIndex = 2;
        var div = document.getElementById("bg-purple-dark");
        div.style.height = "200px";
      }
      if (index == 3) {
        this.activeIndex = 3;
        var div = document.getElementById("bg-purple-dark");
        div.style.height = "200px";
      }
      if (index == 4) {
        this.activeIndex = 4;
        var div = document.getElementById("bg-purple-dark");
        div.style.height = "200px";
      }
    },
    tab(index) {
      this.number = index;
    },
    getHolidayType() {
      axios.post("ReplacementCard/findDept").then((res) => {
        console.log(res);
        this.options1 = res.data.rows;
      });
    },
    // 统计人数
    getSalaryCount() {
      axios("salary/getSalaryCount", {
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.salaryCount.newHires = res.data.data.newHires;
          this.salaryCount.probationPeriod = res.data.data.probationPeriod;
          this.salaryCount.salariedPeople = res.data.data.salariedPeople;
          this.salaryCount.formal = res.data.data.formal;
        }
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.findSalaryByIdList();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findSalaryByIdList();
    },
    //查询
    findSalaryByIdList() {},
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
#bg-purple-dark {
  background: white;
  height: 310px;
}
.bg-purple-dark-two {
  background: white;
  height: 600px;
}
.bg-purple {
  border-radius: 4px;
  min-height: 36px;
  border: 1px solid #c4c6c9;
  margin-left: 13px;
  position: relative;
  top: 20px;
  width: 190px;
  height: 95px;
}
.bg-purple-active {
  border-radius: 4px;
  min-height: 36px;
  border: 1px solid #6d9de5;
  margin-left: 13px;
  position: relative;
  top: 20px;
  width: 190px;
  height: 95px;
  color: #6d9de5;
}
.bg-purple-light {
  background: #e5e9f2;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>